<template>
  <div>
    <div>
      <!-- 知识来源数据展示 -->
      <div class="line knowledge-source vertical-align-top">
        知识来源：
      </div>
      <div class="line vertical-align-top">
        <div v-for="(source, index) in field.source">
          <div class="line vertical-align-top knowledge-source">{{ source.name }} -</div>
          <div class="line vertical-align-top knowledge-source">{{ source.version }} -</div>
          <div class="line vertical-align-top knowledge-source">{{ source.isbn }}</div>
          <el-link slot="reference" icon="el-icon-delete" style="vertical-align: top; color: #FF5555;"
                   @click="deleteSource(index)"></el-link>
        </div>
      </div>
    </div>
    <div>
      <!-- 知识来源数据编辑 -->
      <div v-if="displayAddBlock">
        <el-autocomplete v-model="knowledgeSource.name" class="knowledge-source-input" placeholder="图书名称"
                         :fetch-suggestions="querySearch" @select="handleSelect" size="small"
                         :popper-append-to-body="false" popper-class="my-popper"></el-autocomplete>
        <el-input-number v-model="knowledgeSource.version" class="knowledge-source-input"
                         placeholder="图书版号" size="small"></el-input-number>
        <el-input v-model="knowledgeSource.isbn" class="knowledge-source-input"
                  placeholder="ISBN" size="small"></el-input>
        <el-button circle icon="el-icon-check" title="添加" type="primary" @click="addSource" size="small"></el-button>
        <el-button circle icon="el-icon-close" title="取消" @click="cancel" size="small" style="margin: 0"></el-button>
      </div>
    </div>
    <div>
      <el-link style="color: #2DB7A0" @click="showAddBlock">编辑知识来源</el-link>
    </div>
  </div>
</template>
<script>
export default {
  name: 'KnowledgeSource',
  props: {
    field: {},
    fieldIndex: 0
  },
  data() {
    return {
      displayAddBlock: false,
      knowledgeSource: {
        name: '',
        version: '',
        isbn: ''
      },
    }
  },
  methods: {
    deleteSource(index) {
      this.$emit("del", this.fieldIndex, index)
    },
    showAddBlock() {
      this.knowledgeSource = {
        name: '',
        version: '',
        isbn: ''
      }
      this.displayAddBlock = true
    },
    addSource() {
      // 图书名称不能为空;
      if (!this.knowledgeSource.name) {
        this.$message.warning("图书名称不能为空!")
        return;
      }
      // 同一图书不能引用两次不能为空;
      if (this.field.source.find(item => item.name === this.knowledgeSource.name)) {
        this.$message.warning("已经引用当前图书!")
        return;
      }
      // 隐藏知识来源添加模块
      this.displayAddBlock = false

      let knowledgeSources = sessionStorage.getItem("knowledgeSources") ? JSON.parse(sessionStorage.getItem("knowledgeSources")) : []

      // 检查添加的知识来源是否已经在session中记录了，没有没有记录，则在session中追加记录
      let isNewSource = this.checkNewSource(this.knowledgeSource, knowledgeSources)
      if (isNewSource) {
        knowledgeSources.push(this.knowledgeSource)
        sessionStorage.setItem("knowledgeSources", JSON.stringify(knowledgeSources))
      }

      // 触发添加知识来源事件
      let sourceBak = JSON.parse(JSON.stringify(this.knowledgeSource))
      if (sourceBak.version) {
        sourceBak.version = '第' + sourceBak.version + '版'
      }
      this.$emit("add", this.fieldIndex, sourceBak)
    },
    checkNewSource(source, sources) {
      return sources.filter(item => item.isbn === source.isbn).length === 0
    },
    cancel() {
      this.displayAddBlock = false
    },
    querySearch(queryString, callback) {
      let knowledgeSources = sessionStorage.getItem("knowledgeSources") ? JSON.parse(sessionStorage.getItem("knowledgeSources")) : []
      let results = queryString ? knowledgeSources.filter(source => source.name.toLowerCase() === queryString) : knowledgeSources
      results = results.filter(result => result.value = result.name + "(版本：" + result.version + "，ISBN：" + result.isbn + ")")
      callback(results)
    },
    handleSelect(item) {
      this.knowledgeSource.name = item.name
      this.knowledgeSource.version = item.version
      this.knowledgeSource.isbn = item.isbn
    }
  }
}
</script>
<style scoped>

.line {
  display: inline-block;
}

.vertical-align-top {
  vertical-align: top;
}

.knowledge-source {
  font-family: PingFangSC-Regular, sans-serif;
  font-size: 12px;
  color: #666666;
  letter-spacing: 0;
}

.knowledge-source-input {
  width: 20%;
}

/deep/ .my-popper {
  width: auto!important;
}

</style>
